<template>
  <div>
    <header-login />
    <div class="bgc-white">
      <div class="container-width">
        <logo-bar :advantage="true" />
        <category-bar :collapse="false" />
      </div>
    </div>
    <div class="container-width">
      <div class="flex flex-between">
        <breadcrumb last-name="公告" class="pad-t-8" />
      </div>
      <div class="bgc-white notice-detail" v-loading="loading" element-loading-text="加载中" element-loading-background="#f5f5f5">
        <h1>{{ dataObj.contentName }}</h1>
        <div class="font-12 font-color-6 pad-b-27">{{ dataObj.updateTime ? dataObj.updateTime : dataObj.createTime }}</div>
        <div v-if="true" class="descript">
          <notice-detail :contentDetail="dataObj" />
        </div>
        <!-- 空数据展示 -->
        <none-data v-if="!dataObj.content"/>
        <div class="height-80" />
      </div>
      <div class="height-95" />
    </div>
    <div class="bgc-white">
      <div class="container-width">
        <footer-links/>
      </div>
      <div class="footer-line" />
      <div class="container-width">
        <footer-infos/>
      </div>
    </div>
    <right-nav-sticky />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import headerLogin from '@/components/headerLogin/index.vue'
import logoBar from '@/components/logoBar/index.vue'
import categoryBar from '@/components/categoryBar/index.vue'
import footerLinks from '@/components/footerLinks/index.vue'
import footerInfos from '@/components/footerInfos/index.vue'
import rightNavSticky from '@/components/rightNavSticky/index.vue'
import breadcrumb from '@/components/breadcrumb/index.vue'
import noneData from '@/components/noneData/index.vue'
import noticeDetail from '@/pages/notice/components/noticeDetail/index.vue'
import { getContentDetail } from '@/api/content/content'

export default defineComponent({
  name: 'Index',
  components: {
    headerLogin,
    logoBar,
    categoryBar,
    footerLinks,
    footerInfos,
    rightNavSticky,
    breadcrumb,
    noneData,
    noticeDetail
  },
  setup() {
    const router = useRouter()
    const loading = ref(false)
    const dataObj = ref(<any>[])
    const contentInfoId = router.currentRoute.value.query.contentInfoId
    onMounted(() => {
      init()
    })
    
    const init = () => {
      loading.value = true
      getContentDetail({contentInfoId: contentInfoId}).then(response => {
          loading.value = false
          if (response.isError) return
          dataObj.value = response.data
        })
    }

    return {
      dataObj,
      loading
    }
  }
})
</script>

<style lang="scss" scoped>
.space-category{
  width: 264px;
}
.slider-sign-notice{
  width: 232px;
}
.footer-line{
  height: 1px;
  background: #dbdbdb;
  margin: 0 3%;
}
.notice-detail{
  padding: 0 68px 0 32px;
  h1{
    margin: 0;
    padding: 30px 0 10px 0;
    font-size: 20px;
    font-weight: normal;
  }
  .descript{
    border-top: #e5e5e5 1px solid;
    padding: 5px 25px 5px 20px;
  }
}
</style>
